{% extends "base.html" %}

{% block content %}
<div class="admin-dashboard container">
    <div class="admin-header">
        <h1>评论管理</h1>
        <div class="header-actions">
            <select id="status-filter" class="form-control">
                <option value="all" {% if request.args.get('status', 'all') == 'all' %}selected{% endif %}>全部评论</option>
                <option value="active" {% if request.args.get('status') == 'active' %}selected{% endif %}>正常评论</option>
                <option value="hidden" {% if request.args.get('status') == 'hidden' %}selected{% endif %}>隐藏评论</option>
            </select>
            <a href="{{ url_for('admin.index') }}" class="btn">返回首页</a>
        </div>
    </div>

    <div class="table-container card">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>用户</th>
                    <th>内容</th>
                    <th>时间</th>
                    <th>点赞数</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for comment in comments.items %}
                <tr>
                    <td>{{ comment.author.username }}</td>
                    <td style="max-width:220px">{{ comment.content }}</td>
                    <td>{{ comment.timestamp.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        {{ comment.likes_count }}
                        <button class="btn btn-sm reset-btn" data-id="{{ comment.id }}">
                            <i class="fas fa-undo"></i>
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm toggle-btn {% if comment.is_hidden %}hidden{% endif %}"
                                data-id="{{ comment.id }}">
                            {{ '已隐藏' if comment.is_hidden else '正常' }}
                        </button>
                    </td>
                    <td class="action-buttons">
                        <a href="{{ url_for('main.couple_detail', id=comment.couple_id) }}#c-{{ comment.id }}" class="btn btn-sm">查看</a>
                        <button class="btn btn-sm btn-danger delete-btn" data-id="{{ comment.id }}" data-type="comments">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if comments.pages > 1 %}
    <div class="pagination">
        {% if comments.has_prev %}
        <a href="{{ url_for('admin.manage_comments', page=comments.prev_num, status=request.args.get('status', 'all')) }}" 
           class="btn btn-sm">&laquo; 上一页</a>
        {% endif %}
        
        <span class="current-page">第 {{ comments.page }} 页，共 {{ comments.pages }} 页</span>
        
        {% if comments.has_next %}
        <a href="{{ url_for('admin.manage_comments', page=comments.next_num, status=request.args.get('status', 'all')) }}" 
           class="btn btn-sm">下一页 &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>

<!-- 确认对话框 -->
<div id="confirmDialog" class="modal" style="display: none;">
    <div class="modal-content">
        <h3>确认操作</h3>
        <p id="confirmMessage"></p>
        <div class="modal-actions">
            <button id="confirmYes" class="btn">确定</button>
            <button id="confirmNo" class="btn btn-outline">取消</button>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.modal-actions .btn {
    min-width: 100px;
}

/* 状态筛选下拉框样式 */
#status-filter {
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-right: 15px;
    min-width: 150px;
}
</style>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmDialog = document.getElementById('confirmDialog');
    const confirmMessage = document.getElementById('confirmMessage');
    const confirmYes = document.getElementById('confirmYes');
    const confirmNo = document.getElementById('confirmNo');
    
    // 状态筛选处理
    const statusFilter = document.getElementById('status-filter');
    statusFilter.addEventListener('change', function() {
        window.location.href = "{{ url_for('admin.manage_comments') }}?status=" + this.value;
    });

    // 重置点赞确认
    document.querySelectorAll('.reset-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            showConfirmDialog(
                '确定要重置点赞数吗？',
                '此操作将清空所有点赞记录，不可恢复！',
                async () => {
                    const id = this.dataset.id;
                    try {
                        const response = await fetch(`/admin/comment/${id}/reset_likes`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            }
                        });

                        if (response.ok) {
                            location.reload();
                        } else {
                            showToast('操作失败', 'error');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        showToast('操作失败，请稍后重试', 'error');
                    }
                }
            );
        });
    });

    // 显示确认对话框
    function showConfirmDialog(title, message, onConfirm) {
        confirmMessage.textContent = message;
        confirmDialog.style.display = 'flex';
        
        confirmYes.onclick = () => {
            onConfirm();
            confirmDialog.style.display = 'none';
        };
        
        confirmNo.onclick = () => {
            confirmDialog.style.display = 'none';
        };
    }

    // 点击对话框外部关闭
    confirmDialog.addEventListener('click', function(e) {
        if (e.target === confirmDialog) {
            confirmDialog.style.display = 'none';
        }
    });
});
</script>
{% endblock %} 